<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框示例</title>
    <script>
        async function updateText() {
            let inputValue = document.getElementById("userInput").value;

            document.getElementById("sqldbqm").innerText = "XINZHENG_" + inputValue;
            document.getElementById("sqldms").innerText = "数智排水新增" + inputValue;
            document.getElementById("sqltbqm").innerText = "XINZHENGCF_" + inputValue;
            document.getElementById("sqltms").innerText = "数智排水新增触发" + inputValue;
            document.getElementById("sqltxyk").innerText = "XINZHENG_" + inputValue;
            document.getElementById("sqltsqlm").innerText = "cmd_" + inputValue;
            document.getElementById("sqltsjkid").innerText = "数智排水";
            document.getElementById("sqltsjbq").innerText = "DI_CHUFA.F_CV";

            try {
                const response = await fetch(`http://39.184.194.199:8281/api_8282/drainage/ifix/getTableColumn/${inputValue}`);
                if (!response.ok) throw new Error("网络响应错误");
                const data = await response.json();
                const container = document.getElementById("sqldsjdy");
                container.innerHTML = "";

                let hasIllegal = false;

                data.forEach(item => {
                    const div = document.createElement("div");
                    div.textContent = item;
                    div.style.wordBreak = "break-all";
                    div.style.marginBottom = "5px";

                    if (/^[Ss]/.test(item)) {
                        div.style.color = "red";
                        hasIllegal = true;
                    }

                    container.appendChild(div);
                });

                const btn = document.getElementById("copyDsBtn");
                if (data.length > 8) {
                    btn.innerText = "表字段数量禁止超过8";
                    btn.style.backgroundColor = "#d9534f";
                    btn.disabled = true;
                } else if (hasIllegal) {
                    btn.innerText = "点位名称禁止以S、s、B开头";
                    btn.style.backgroundColor = "#d9534f";
                    btn.disabled = true;
                } else {
                    btn.innerText = "复制";
                    btn.style.backgroundColor = "#007bff";
                    btn.disabled = false;
                }
            } catch (error) {
                document.getElementById("sqldsjdy").innerText = "获取失败: " + error.message;
            }

            resetButtons();
        }

        function copyToClipboard(id, event) {
            let text = document.getElementById(id).innerText;
            let tempInput = document.createElement("textarea");
            tempInput.value = text;
            document.body.appendChild(tempInput);
            tempInput.select();
            try {
                document.execCommand("copy");
                let button = event.target;
                button.innerText = "已复制";
                button.style.backgroundColor = "#67C23A";
            } catch (err) {
                console.error("复制失败", err);
            }
            document.body.removeChild(tempInput);
        }

        function resetButtons() {
            let buttons = document.querySelectorAll("button");
            buttons.forEach(button => {
                if (button.innerText === "已复制") {
                    button.innerText = "复制";
                    button.style.backgroundColor = "#007bff";
                }
            });
        }
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: auto;
            padding: 30px;
            background-color: #f4f4f9;
        }
        h3 {
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }
        input[type="text"] {
            width: 100%;
            padding: 15px;
            font-size: 18px;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }
        input[type="text"]:focus {
            border-color: #67C23A;
            outline: none;
        }
        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<input type="text" id="userInput" oninput="updateText()" placeholder="请输入内容...">
<h3>SQD 信息</h3>
<div class="row">
    <div><strong>标签名:</strong> <span id="sqldbqm"></span></div>
    <button onclick="copyToClipboard('sqldbqm', event)">复制</button>
    <div><strong>描述:</strong> <span id="sqldms"></span></div>
    <button onclick="copyToClipboard('sqldms', event)">复制</button>
</div>
<div class="row">
    <div style="width: 100%;"><strong>数据定义:</strong></div>
    <div id="sqldsjdy" style="width: 100%; margin-top: 10px;"></div>
    <button id="copyDsBtn" onclick="copyToClipboard('sqldsjdy', event)">复制</button>
</div>
<h3>SQT 信息</h3>
<div class="row">
    <div><strong>触发器名:</strong> <span id="sqltbqm"></span></div>
    <button onclick="copyToClipboard('sqltbqm', event)">复制</button>
</div>
<div class="row">
    <div><strong>触发描述:</strong> <span id="sqltms"></span></div>
    <button onclick="copyToClipboard('sqltms', event)">复制</button>
</div>
<div class="row">
    <div><strong>下一块:</strong> <span id="sqltxyk"></span></div>
    <button onclick="copyToClipboard('sqltxyk', event)">复制</button>
</div>
<div class="row">
    <div><strong>SQL名:</strong> <span id="sqltsqlm"></span></div>
    <button onclick="copyToClipboard('sqltsqlm', event)">复制</button>
</div>
<div class="row">
    <div><strong>数据库ID:</strong> <span id="sqltsjkid"></span></div>
    <button onclick="copyToClipboard('sqltsjkid', event)">复制</button>
</div>
<div class="row">
    <div><strong>事件标签:</strong> <span id="sqltsjbq"></span></div>
    <button onclick="copyToClipboard('sqltsjbq', event)">复制</button>
</div>
</body>
</html>
